<template>
    <div class="order-detail">
        <group title="基本信息">
            <cell title="单号">{{order.serial_number}}</cell>
            <cell title="地址">{{order.address}}</cell>
            <cell title="面积">{{order.square}}</cell>
            <cell title="联系人">{{order.name}}</cell>
            <cell title="联系方式">{{canShowInfo}}</cell>
            <cell title="品牌">{{order.company_name}}</cell>
            <cell title="材质">{{order.material}}</cell>
        </group>
        <group title="订单操作信息">
            <cell title="安装时间">{{order.booking_date | time}}</cell>
            <cell title="当前状态">{{order.workflow_state | state}}</cell>
            <cell title="测量师傅">{{order.customer_service_info.name}}</cell>
            <cell title="安装师傅">{{order.service_info.name}}</cell>
            <cell title="预估价格">{{order.total}}</cell>
        </group>
        <template v-if="order.remark">
        <group title="备注">
            <div class="text-remark">
                <cell><span>{{order.remark}}</span></cell>
            </div>
        </group>
    </template>

        <template v-if="!ownerInfo && isServer && (order.workflow_state === 'new' || order.workflow_state === 'appointed_measurement')">
            <group>
                <x-button v-if="order.workflow_state === 'new'" @click.native="receive_order" type="primary">抢单</x-button>
                <x-button v-if="order.workflow_state === 'appointed_measurement'" @click.native="upload_measure" type="primary">上传测量图纸</x-button>
                <x-button v-if="order.workflow_state === 'appointed_installation'" @click.native="upload_measure" type="primary">上传安装图纸</x-button>
            </group>
        </template>
        <template v-else-if="order.workflow_state != 'canceled' && order.workflow_state != 'new'">
            <group>
                <cell v-if="showInfo" title="进一步查看订单详细" @click.native="events" is-link></cell>
            </group>
        </template>

        <group>
            <x-button v-if="relationOrder && order.workflow_state != 'canceled' && order.workflow_state != 'completed'" @click.native="orderCancel" type="warn">取消订单</x-button>
        </group>
    </div>
</template>
<script>
    import {Cell, Group, numberComma, dateFormat, XButton, XInput} from 'vux'
import {filter_state, current_user} from '../util.js'
export default {
    components:{
        Cell,
            Group,
            XButton,
            XInput,
    },
    data() {
        return {
            order: {service_info: {name: "--"}, customer_service_info: {name: "--"}},
            type: "info",
            detail: false,
            id: null,
            is_success: false,
            is_fail: false,
        }
    },
    filters: {
        money(val) {
            return numberComma(val, 2)
        },
            time(val) {
                return dateFormat(val * 1000, "YYYY-MM-DD HH:mm")
            },
            state(val) {
                return filter_state(val)
            },
    },
    computed: {
        ownerInfo() {
            return this.order.customer_id == current_user().id  
        },
        showInfo(){
            return current_user().role == 2 || this.order.customer_id == current_user().id
        },
            relationOrder() {
                let val = this.order.customer_id == current_user().id || this.order.facilitator_id == current_user().id || this.order.customer_service_id == current_user().id
                return val
            },
            isServer(){
                return current_user().role == 2
            },
            canShowInfo() {
                let u_id = current_user().id
                let str = this.order.tel
                if (this.order.customer_id == u_id) {
                    return str
                }
                if (u_id && (this.order.facilitator_id || this.order.customer_service_id)) {  
                    if (this.order.facilitator_id == u_id || this.order.customer_service_id == u_id) {
                        return str
                    }
                } else {
                    if (str) {
                        return str.substr(0, 3) + "******" + str.substr(9, 11)
                    }

                }

            },

    },
    created() {
        this.$store.commit("storeState", false)
        this.fetch_order()
    },
    methods: {
        fetch_order(){
            let id = this.$route.params.id
            let type = this.$route.query.type
            this.type = type
            this.id = id
            if (type == "detail") {
                this.detail = true
            }
            this.$http.get("orders/" + id + ".json").then(res => {
                let data = res.data;
                this.order = data.order;
            })
        },
            receive_order(){
                this.$http.post("orders/" + this.id + "/compete_order.json").then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        this.$vux.toast.text("抢单成功")
                        this.$router.push({path: "/main",query: {type: "all"}})
                    } else {
                        this.$vux.toast.show({
                            type: "cancel",
                            text: "抢单失败"
                        })
                    }
                })
            },
            events() {
                this.$router.push({path: "/events", query: {id: this.id}})
            },
            orderCancel() {
                let self = this
                this.$vux.confirm.show({
                    title: "确认取消",
                    content: "取消后不可恢复",
                    onConfirm() {
                        self.cancelOrder()
                    }
                })    
            },
            cancelOrder(){
                this.$http.delete('orders/' + this.id + ".json").then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        this.$vux.toast.text("取消成功")
                        this.$router.push({path: "/main", query: {type: "all"}})
                    } else {
                        this.$vux.toast.show({
                            type: "cancel",
                            text: data.msg
                        })
                    }
                })
            }
    }
}

</script>
<style>
    .order-detail div {
        font-size: 14px;
    }
    .text-remark .weui-cell__ft{
        text-align: left;
    }
</style>
